<html>
<head>
    <link rel="stylesheet" href="${PATH}/layui/css/layui.css" media="all">
    <script src="${PATH}/layui/layui.js" charset="UTF-8"></script>
    <style type="text/css">
        .layui-table-cell{
            height:18px;
            line-height: 18px;
        }

        /*
            设置layui的输入框的行高
        */
        .layui-form-label {
            padding: 5px 15px;
        }
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        .layui-form-select dl dd, .layui-form-select dl dt {
            line-height: 30px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="test1" name="title" lay-verify="title" autocomplete="off" placeholder="请输入订单开始日期" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="test2" name="username" lay-verify="required" placeholder="请输入订单结束日期" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">客户名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">查找设置：</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="精确查找：" title="精确查找" checked="">
                <input type="radio" name="sex" value="模糊查找：" title="模糊查找">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">订单号码：</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置数据</button>
            <button class="layui-btn" lay-submit lay-filter="formDemo">导入数据</button>
        </div>

    </div>


</form>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        form.render();
        //日期
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);

            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

    });
</script>
</body>
</html>